<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-08-06 18:01:54
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-08-08 17:35:09
 * @FilePath: \flex-\5 canvas 像素及其操作与画板.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        .box {
            width: 1000px;
            height: 800px;
            margin: 30px auto;
            display: flex;
            border: 1px solid;
        }

        #myCanvas {
            margin: auto;
            border: 1px solid;
        }
    </style>
</head>

<body>
    <button class="button-balanced" id="save">save</button>
    <!-- 点击图片可以下载图片 -->
    <a href="" download="canvas_love.png" id="save_href">
        <img src="" id="save_img" />
    </a>
    <div class="box">
        <canvas id="myCanvas" height="750" width="950" tabindex="333"></canvas>
    </div>
</body>
<script>
    /** @type { HTMLCanvasElement } */
    const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    let image = new Image()
    image.src = "./img/table.jpg"
    image.onload = (e) => {
        ctx.drawImage(image, 0, 0, image.width, image.height, 20, 30, 800, 500)
        // console.log(ctx.getImageData(100, 200, 50, 100))


        // 选择区域
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(100, 200)
        ctx.lineTo(150, 200)
        ctx.lineTo(150, 300)
        ctx.lineTo(100, 300)
        ctx.lineTo(100, 200)
        ctx.strokeStyle = '#ff0'
        ctx.lineWidth = '10'
        ctx.lineJoin = 'round'
        ctx.lineCap = 'round'
        ctx.stroke()
        ctx.closePath();
        ctx.restore();
    }
    function drawImg(ctx, x, y) {
        let imgdata = ctx.createImageData(5, 5)
        for (let i = 0; i < imgdata.data.length; i++) {
            if ((i % 4) === 3) {
                imgdata.data[i] = 255;
                continue;
            }
            imgdata.data[i] = Math.random() * 255; // 红
            imgdata.data[i + 1] = Math.random() * 255; // 绿
            imgdata.data[i + 2] = Math.random() * 255; // 蓝
        };
        ctx.putImageData(imgdata, x, y);
    }

    myCanvas.onmousedown = (e) => {
        drawImg(ctx, e.offsetX, e.offsetY)
        myCanvas.onmousemove = (ee) => {
            drawImg(ctx, ee.offsetX, ee.offsetY)
        }
        myCanvas.onmouseup = (t) => {
            myCanvas.onmousemove = null
        }
    }
    myCanvas.onmouseleave = () => {
        myCanvas.onmousemove = null
    }

</script>

<script>
    // 点击保存 canvas 为图片
    var butSave = document.getElementById("save");

    butSave.onclick = () => {
        var saveHref = document.getElementById("save_href");
        /*
         * 传入对应想要保存的图片格式的mime类型
         * 常见：image/png，image/gif,image/jpg,image/jpeg
         */
        var img = document.getElementById("save_img");
        var tempSrc = myCanvas.toDataURL("image/png");  // 保存为图片

        img.src = tempSrc;
        saveHref.href = tempSrc;    // 点击图片可以下载图片
    };
</script>

</html>